<template>
  <div class="time-hms-input" :class="{'innerType': type === 'inner'}">
    <input ref="inputH" v-model="inputH" @blur="blur" @focus="focusEvent('inputH')" maxlength="2" />:
    <input ref="inputm" v-model="inputm" @blur="blur" @focus="focusEvent('inputm')" maxlength="2" />:
    <input ref="inputs" v-model="inputs" @blur="blur" @focus="focusEvent('inputs')" maxlength="2" />
    <div class="time-hms-input__arrowbtn">
      <i
        class="el-icon-caret-top"
        @click="addH"></i>
      <i
        class="el-icon-caret-bottom"
        @click="subH"></i>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'inputVal',
    event: 'change'
  },
  props: {
    inputVal: {
      type: Array,
      default() {
        return ['00','10','00'] // 时分秒
      }
    },
    type: {
      type: String,
      default: ''
    },
    max: {
      type: Array,
      default() {
        return ['23','59','59'] // 时分秒
      }
    },
    min: {
      type: Array,
      default() {
        return ['00', '00', '00'] // 时分秒
      }
    }
  },
  data() {
    return {
      inputH: '',
      inputm: '',
      inputs: '',
      nowInput: 'inputH'
    }
  },
  computed: {
    finalValue() {
      const H = this.formatNum(this.inputH)
      const m = this.formatNum(this.inputm, 'm')
      const s = this.formatNum(this.inputs, 's')
      return [H, m, s]
    }
  },
  watch: {
    'inputVal': {
      immediate: true,
      handler(v) {
        const [H, m, s] = v
        this.inputH = this.formatNum(H)
        this.inputm = this.formatNum(m, 'm')
        this.inputs = this.formatNum(s, 's')
      }
    },
  },
  methods: {
    _Hms2s(hms) {
      const [H, m, s] = hms
      return (Number(H) * 60 * 60) + (Number(m) * 60) + Number(s)
    },
    blur() {
      const [maxH, maxm, maxs] = this.max
      const [minH, minm, mins] = this.min
      const [H, m, s] = this.finalValue

      const _maxS = this._Hms2s(this.max)
      const _minS = this._Hms2s(this.min)
      const _valS = this._Hms2s(this.finalValue)
      let _v
      if (_valS > _maxS) {
        _v = this.max.slice()
      } else if (_valS < _minS) {
        _v = this.min.slice()
      } else {
        _v = this.finalValue.slice()
      }
      console.log('---change', _v)
      this.$emit('change', _v)
    },
    focusEvent(inputType) {
      this.nowInput = inputType
      this.$refs[inputType].select()
    },
    formatNum(num, type) {
      let _num = Number(num)
      if (isNaN(_num)) return '00' // 非数字返回00
      if (_num < 0) _num = 0 // 小于0 置为0
      const over59 = _num >= 60 // 是否超过59 用于 分秒的极限判断
      const over23 = _num >= 24 // 是否超过24 用于 时的极限判断
      _num = _num.toFixed(0) // 移除小数点且转为字符串
      return _num.length < 2 ? `0${_num}` : // 小于10补位0
        (type === 'm' || type === 's') && over59 ? '59' : // 是分秒类型就判断极限
        (!type || type === 'H') && over23 ? '23' : _num // 默认判断时的极限
    },
    addH() {
      this[this.nowInput] = this.formatNum(Number(this[this.nowInput]) + 1, this.nowInput.replace('input', ''))
      this.blur()
    },
    subH() {
      this[this.nowInput] = this.formatNum(Number(this[this.nowInput]) - 1, this.nowInput.replace('input', ''))
      this.blur()
    }
  }
}
</script>

<style lang="scss" scoped>
.time-hms-input {
  display: flex;
  width: 180px;
  position: relative;
  height: 32px;
  border: 1px solid #e9e9e9;
  align-items: center;

  &.innerType {
    border-color: transparent;
    width: 105px;
    align-items: center;
    line-height: 32px;
    input {
      background: transparent;
    }
  }
  &.innerType:focus-within {
    border-color: #e9e9e9;
  }

  input {
    width: 20%;
    border: none;
    text-align: center;
    font-size: 14px;
    color: #9a9a9a;
    &:focus {
      outline: none;
    }
  }

  &__arrowbtn {
    position: absolute;
    right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ccc;
    cursor: pointer;
    font-size: 12px;
    top: 0;
    bottom: 0;
    i:hover {
      color: #9a9a9a;
    }
  }

}
</style>